<script setup lang="ts">
import { ref, markRaw } from "vue";
import ReCol from "@/components/ReCol";
import { useDark, randomGradient } from "./utils";
import { ReNormalCountTo } from "@/components/ReCountTo";
import { useRenderFlicker } from "@/components/ReFlicker";
import { barChart, lineChart, roundChart } from "./components/chart";
import Segmented, { type OptionsType } from "@/components/ReSegmented";
import { statisticsConfig } from "./utils/hook";
import { lineConfig } from "./utils/line";
import { ReText } from "@/components/ReText";

defineOptions({
  name: "Welcome"
});

const { isDark } = useDark();

const curWeek = ref(1); // 0上周、1本周
const optionsBasis: Array<OptionsType> = [
  {
    label: "上周"
  },
  {
    label: "本周"
  }
];
const { chartData, questionData } = statisticsConfig();
const { barChartData } = lineConfig();

function goToWhiteList() {
  window.location.href = "#/work_order";
}
</script>

<template>
  <div>
    <el-row :gutter="24" justify="space-around">
      <re-col
        v-for="(item, index) in chartData"
        :key="index"
        v-motion
        class="mb-[18px]"
        :value="6"
        :md="12"
        :sm="12"
        :xs="24"
        :initial="{
          opacity: 0,
          y: 100
        }"
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 80 * (index + 1)
          }
        }"
      >
        <el-card class="line-card" shadow="never">
          <div class="flex justify-between">
            <span class="text-md font-medium">
              {{ item.name }}
            </span>
            <div
              class="w-8 h-8 flex justify-center items-center rounded-md"
              :style="{
                backgroundColor: isDark ? 'transparent' : item.bgColor
              }"
            >
              <IconifyIconOffline
                :icon="item.icon"
                :color="item.color"
                width="18"
              />
            </div>
          </div>
          <div class="flex justify-between items-start mt-3">
            <div class="w-1/2">
              <ReNormalCountTo
                :duration="item.duration"
                :fontSize="'1.6em'"
                :startVal="100"
                :endVal="item.value"
              />
              <p class="font-medium text-green-500">{{ item.percent }}</p>
            </div>
            <lineChart
              v-if="item.data.length > 1"
              class="!w-1/2"
              :color="item.color"
              :data="item.data"
            />
            <roundChart v-else class="!w-1/2" />
          </div>
        </el-card>
      </re-col>

      <re-col
        v-motion
        class="mb-[18px]"
        :value="18"
        :xs="24"
        :initial="{
          opacity: 0,
          y: 100
        }"
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 400
          }
        }"
      >
        <el-card class="bar-card" shadow="never">
          <div class="flex justify-between items-start mt-3">
            <barChart
              :all="barChartData[0].all"
              :xq="barChartData[0].xq"
              :parknfly="barChartData[0].parknfly"
              :rztc="barChartData[0].rztc"
              :dingtalk="barChartData[0].dingtalk"
            />
          </div>
        </el-card>
      </re-col>
      <re-col
        v-motion
        class="mb-[18px]"
        :value="6"
        :xs="24"
        :initial="{
          opacity: 0,
          y: 100
        }"
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 640
          }
        }"
      >
        <el-card shadow="never">
          <div class="flex justify-between">
            <span class="text-md font-medium">最新工单</span>
          </div>
          <el-scrollbar max-height="504" class="mt-3">
            <div
              v-for="(item, index) in questionData"
              :key="index"
              center
              placement="top"
              :timestamp="item.created_at"
            >
              <el-row
                :class="[
                  'text-text_color_regular',
                  'text-sm',
                  'workorder-row',
                  { 'is-last': index === questionData.length - 1 }
                ]"
                @click="goToWhiteList"
              >
                <re-col>
                  <span class="workorder-title">问题:</span>
                  <span class="workorder-msg">{{ item.question }}</span>
                </re-col>

                <re-col class="workorder-status">
                  <span class="workorder-title">状态:</span>
                  <span class="workorder-msg">{{ item.status }}</span>
                </re-col>
                <re-col class="workorder-order">
                  <span />
                </re-col>
              </el-row>
            </div>
          </el-scrollbar>
        </el-card>
      </re-col>
    </el-row>
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-card) {
  --el-card-border-color: none;

  /* 解决概率进度条宽度 */
  .el-progress--line {
    width: 85%;
  }

  /* 解决概率进度条字体大小 */
  .el-progress-bar__innerText {
    font-size: 15px;
  }

  /* 隐藏 el-scrollbar 滚动条 */
  .el-scrollbar__bar {
    display: none;
  }

  /* el-timeline 每一项上下、左右边距 */
  .el-timeline-item {
    margin: 0 6px;
  }
}

.main-content {
  margin: 20px 20px 0 !important;
}

.workorder-order {
  border-bottom: 1px solid #e2e2e2;
  margin: 10px 0;
}

/* 假设你已经在 scoped 样式中定义了 .workorder-row */
.workorder-row {
  /* 其他样式... */
  cursor: pointer; /* 添加这个来显示小手图标 */
}

.workorder-row.is-last .workorder-order {
  border-bottom: none;
}

.workorder-status {
  padding-top: 5px;
}

.workorder-title {
  font-weight: 700;
}
.workorder-msg {
  color: #8d8d8d;
  padding-left: 5px;
}
</style>
